<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<el-select v-model="queryParams.projectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目名称">
					<el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName" :value="item.biProjectCode" />
				</el-select>
				<el-date-picker class="zs-space-right-sm zs-space-right-sm" v-model="queryParams.statsTime" placeholder="开始日期" clearable value-format="YYYY-MM-DD" :disabled-date="disabledDateStart" @change="queryList" />
				<el-date-picker class="zs-space-right-sm zs-space-right-sm" v-model="queryParams.endTime" placeholder="结束日期" clearable value-format="YYYY-MM-DD" :disabled-date="disabledDateEnd" @change="queryList" />
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.liftPoleType || queryParams.abnormalType }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select v-model="queryParams.liftPoleType" class="zs-select-md zs-space-right-sm" placeholder="抬杆类型" clearable @change="queryList" :teleported="false">
							<el-option v-for="(item, index) in liftPoleTypeList" :key="index" :label="item" :value="item" />
						</el-select>
						<el-select v-model="queryParams.abnormalType" class="zs-select-md zs-space-right-sm" placeholder="异常类型" clearable @change="queryList" :teleported="false">
							<el-option v-for="(item, index) in abnormalTypeList" :key="index" :label="item" :value="item" />
						</el-select>
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList()">查询</el-button>
			</div>
			<div>
				<el-button class="zs-btn-plain zs-btn-md" @click="handleDownload">
					<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
				</el-button>
			</div>
		</div>
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="carNo" label="车牌号" minWidth="120" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />
				<el-table-column prop="inTime" label="进场时间" minWidth="155" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />
				<el-table-column prop="outTime" label="出场时间" minWidth="155" show-overflow-tooltip :align="'left'" :formatter="defaultTableData" />
				<el-table-column prop="parkHours" label="停留时长" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="receiveAmount" label="异常费用" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="workspaceName" label="放行出口" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="carMobile" label="联系方式" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="chargeName" label="收费员" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="type" label="抬杆类型" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="abnormalType" label="异常类型" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="abnormalDesc" label="异常描述" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="checkName" label="审核人" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
				<el-table-column prop="" label="审核依据" width="90" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" :disabled="row.imageUrlList && row.imageUrlList.length > 0 ? false : true" link size="small" @click="fetchImage(row.imageUrlList)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="oaStatus" label="审核状态" minWidth="120" show-overflow-tooltip :align="'center'" :formatter="defaultTableData" />
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
			<el-image-viewer v-if="viewerVisible" :url-list="previewList" :initial-index="0" @close="viewerVisible = false" />
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import dbPublicApi from '@/api/dbPublic';
	import { defaultTableData, downloadNewFile } from '@/utils/publicUtils';
	import { toThousands } from '@/utils/number-util';
	import { abnormalParkingDetailApi, abnormalParkingExportApi } from '@/api/Manage/Business/detailPages';
	import { useRoute } from 'vue-router';
	import { useStore } from 'vuex';
	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const route = useRoute();
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const { biProjectCode, dataTime, resourceKey, carNo } = route.query;

	const abnormalTypeList = ref(['车辆识别异常', '特殊车辆放行', '查无入场信息', '凯悦优惠', '珑庭优惠', '超时2分钟内', '其他']);
	const liftPoleTypeList = ref(['正常放行', '人工放行', '手动开闸', '异常放行']);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let queryParams = reactive({ pageNum: 1, pageSize: curPageSize.value, carNo: carNo, projectCode: biProjectCode });

	const queryList = async () => {
		tableData.loading = true;
		let res = await abnormalParkingDetailApi(queryParams);
		if (res.data.errorCode !== 200) return;
		tableData.data = res.data.data || [];
		initData(tableData.data);
		tableData.total = res.data.totalCount;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.receiveAmount = toThousands(item.receiveAmount);
		});
	};

	// 获取项目列表
	let projectList = ref([]); // 项目列表
	const getPorjectList = async () => {
		let res = await dbPublicApi.queryProjectPcApi({ dataTime, resourceKey });
		if (res.data.code !== 200) return;
		projectList.value = res.data.data || [];
	};

	//预览图片
	const previewList = ref([]);
	const viewerVisible = ref(false);
	const fetchImage = async imageUrlList => {
		previewList.value = imageUrlList;
		viewerVisible.value = true;
	};

	// 导出
	const handleDownload = async () => {
		const fileName = `抬杆异常明细报表.xls`;
		let fileData = await abnormalParkingExportApi(queryParams);
		downloadNewFile(fileData.data, fileName);
	};

	//时间判断
	const disabledDateStart = date => {
		if (!queryParams.endTime) return false
		return date.getTime() > new Date(queryParams.endTime).getTime();
	};

	const disabledDateEnd = date => {
		if (!queryParams.statsTime) return false
		return date.getTime() < new Date(queryParams.statsTime).getTime();
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNum = size;
		}
		queryList();
	};

	getPorjectList();
	queryList();
</script>

<style scoped lang="scss">
	:deep(.el-image-viewer__img){
		max-height: 85%!important;
	}
</style>
